<template>
  <view
    class="drawers_box"
    v-if="isDisplay"
    :style="{ '--time': `${animTime / 1000}s` }"
    :class="[isAnim != null ? (isAnim ? 'box_block' : 'box_display') : '']"
  >
    <view
      class="content"
      :style="{ '--time': animTime }"
      :class="[
        isAnim != null ? (isAnim ? 'content_block' : 'content_display') : '',
      ]"
    >
      <!-- 顶部导航栏 -->
      <top-navigation-bar id="back" :is-fixed="false">
        <template #left>
          <uni-icons type="back" @click.self="close" size="26" />
        </template>
        <template #middle>
          <view class="title">社区选择</view>
        </template>
      </top-navigation-bar>

      <view class="body">
        <!-- 当前选择 -->
        <view class="now_choose" id="now">
          <uni-icons
            type="location-filled"
            size="22"
            color=" rgba(244, 179, 51)"
            class="icon"
          />
          <view class="msg">{{
            useRegion.placeList[useRegion.placeIndex]
          }}</view>
        </view>

        <!-- 内容 -->
        <view class="list">
          <!-- 地区选择 -->
          <scroll-view
            scroll-y
            class="region"
            style="height: calc(100vh - 250rpx)"
          >
            <view
              v-for="(item, index) in useRegion.regionList"
              :key="index"
              class="item"
              @click="regionChoose(index)"
              :class="{ choose: useRegion.regionIndex == index }"
              >{{ item }}</view
            >
          </scroll-view>

          <!-- 社区选择 -->
          <scroll-view
            scroll-y
            class="community"
            style="height: calc(100vh - 250rpx)"
          >
            <view
              v-for="(item, index) in useRegion.placeList"
              :key="index"
              @click="useRegion.placeIndex = index"
              class="item"
            >
              <view class="left">{{ item }}</view>
              <view class="right">
                社区详情
                <uni-icons type="navigate" size="18" />
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<!-- 地区切换组件 -->
<script lang="ts" setup>
import topNavigationBar from '@/components/business/top_navigation_bar/top-navigation-bar.vue'
import { ref } from 'vue'
import { useRegionStore } from '@/store/region'

//区域的全局状态
const useRegion = useRegionStore()

//是否展开动画
const isAnim = ref<boolean | null>(null)

//是否显示盒子
const isDisplay = ref(false)

//动画时长,毫秒
const animTime = ref(300)

/**
 * 区域切换
 * @param index: 选中下标
 */
const regionChoose = (index: number) => {
  //更新选中下标
  useRegion.regionIndex = index

  //更新社区选中下标
  useRegion.placeIndex = 0
  //请求
  useRegion.getCommunityList()
}

//打开
const open = () => {
  if (isDisplay.value) {
    return
  }
  isDisplay.value = true
  isAnim.value = true
}

//关闭
const close = () => {
  if (!isAnim.value) {
    return
  }
  isAnim.value = false
  setTimeout(() => {
    isDisplay.value = false
  }, 500)
}

//对外暴露
defineExpose({
  close,
  open,
})
</script>

<style scoped lang="scss">
.drawers_box {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: $uni-bg-color-grey;

  .content {
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    background-color: $uni-bg-color;

    .title {
      font-size: 32rpx;
      margin: auto;
    }

    .body {
      padding: 0 20rpx;
      width: calc(100% - 40rpx);
      .now_choose {
        display: flex;
        align-items: center;
        height: 90rpx;

        .icon {
          transform: translateY(2rpx);
        }

        .msg {
          font-weight: 700;
          font-size: 38rpx;
          margin-left: 10rpx;
        }
      }

      .list {
        display: flex;

        .region {
          width: 150rpx;
          margin-right: 50rpx;
          background-color: $uni-bg-color-grey;

          .item {
            text-align: center;
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            font-size: 28rpx;
          }
        }

        .community {
          width: calc(100% - 200rpx);

          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 80rpx;
            line-height: 80rpx;

            .left {
              font-size: 28rpx;
              font-weight: 700;
            }
            .right {
              display: flex;
              align-items: center;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}

.choose {
  background-color: $uni-bg-color;
  transition: all 0.3s;
}

.content_display {
  animation: content_display var(--time) forwards;
}

@keyframes content_display {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.content_block {
  animation: content_block var(--time) forwards;
}

@keyframes content_block {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.box_display {
  animation: box_display var(--time) forwards;
}

@keyframes box_display {
  0% {
    background-color: rgba(181, 176, 176, 0.204);
  }
  100% {
    background-color: transparent;
  }
}

.box_block {
  animation: box_block var(--time) forwards;
}

@keyframes box_block {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: rgba(181, 176, 176, 0.204);
  }
}
</style>
